import React, { Component } from 'react';
import { Scroller, Touchable } from '$yo-component';
import Header from '$component/header/index.js';
import Footer from '$component/footer/index.js';
import yoHistory from '$common/history';
import ExperienceData from '../../common/mock/experience.json'
import './index.scss';

class Experience extends Component {

    render() {
        console.log(ExperienceData)
        var Data =  ExperienceData.map(function(item,index){
         
            return(
                
                // key={index}必须要，否则报错
                <li className="item"  key={index}>
                    <time className="time">{item.time}</time>
                    <div className="detail">
                        <div className="yo-card">
                            <h2 className="hd">{item.name}</h2>
                            <div className="hd">
                                <h3 className="item">基本信息：</h3><br/>
                                <div className="item">企业性质：{item.category}</div>
                                <div className="item">公司网址：{item.url}</div>
                                <div className="item">所在部门：{item.division}</div>
                                <div className="item">职位：{item.posts}</div>
                            </div>
                        </div>
                    </div>
                </li>  
            
            )

            
        })
        return (
            <div className="yo-flex">

                <Header title="经历" left={false}/>
                <Scroller extraClass="flex">
                    <div className="m-content">
                    <ul className="yo-timeline">
                        {Data}
                        </ul>
                    </div>
                </Scroller>
                <Footer left={false}/>
            </div>
        )
    }
}



export default Experience;
